<%--
  Created by IntelliJ IDEA.
  User: 刘伶
  Date: 2020/6/20
  Time: 16:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>--%>
<%--<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>--%>
<!DOCTYPE html>
<html>
<head>
    <!-- Meta-Information -->
    <title>酒店客房管理系统</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Vendor: Bootstrap 4 Stylesheets  -->
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

    <!-- Our Website CSS Styles -->
    <link rel="stylesheet" href="css/icons.min.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <link rel="stylesheet" href="css/responsive.css" type="text/css">

    <!-- Color Scheme -->
    <link rel="stylesheet" href="css/color-schemes/color.css" type="text/css" title="color3">
    <link rel="alternate stylesheet" href="css/color-schemes/color1.css" title="color1">
    <link rel="alternate stylesheet" href="css/color-schemes/color2.css" title="color2">
    <link rel="alternate stylesheet" href="css/color-schemes/color4.css" title="color4">
    <link rel="alternate stylesheet" href="css/color-schemes/color5.css" title="color5">

    <%--    edit by fjh--%>
    <link rel="stylesheet" href="layui/css/layui.css">

</head>
<body class="expand-data panel-data">

<header class="side-header light-skin expand-header">
    <div class="nav-head">主菜单<span class="menu-trigger"><i class="ion-android-menu"></i></span></div>
    <nav class="custom-scrollbar">
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-home"></i> <span>房间占用查询</span></a>
                <ul class="sb-drp">
                    <li><a href="/hotelsystem/searchOccupyRoom" title="">查询</a></li>
                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-home"></i> <span>客房账单管理</span></a>
                <ul class="sb-drp">
                    <li><a href="/hotelsystem/roomBillPage" title="">客房账单</a></li>
                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-android-contact"></i> <span>入住服务</span></a>
                <ul class="sb-drp">
                    <li><a href="/hotelsystem/addStayBusiness" title="">登记入住</a></li>
                </ul>
                <ul class="sb-drp">
                    <li><a href="/hotelsystem/stayBusinessPage" title="">住房服务管理</a></li>
                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-fireball"></i> <span>预定服务</span></a>
                <ul class="sb-drp">
                    <li><a href="/hotelsystem/addRoomBusiness" title="">预定客房</a></li>
                    <li><a href="/hotelsystem/roomBusinessPage" title="">预定业务管理</a></li>
                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-fireball"></i> <span>房客管理</span></a>
                <ul class="sb-drp">
                    <li><a href="${pageContext.request.contextPath}/getGuestMain.action" title="">房客列表</a></li>
                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-fireball"></i> <span>会员管理</span></a>
                <ul class="sb-drp">
                    <li><a href="${pageContext.request.contextPath}/getVipMain.action" title="">会员列表</a></li>

                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-fireball"></i> <span>商品订单</span></a>
                <ul class="sb-drp">
                    <li><a href="${pageContext.request.contextPath}/goodsOrder.findAll?page=1&sie=4" title="">查看商品订单</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header><!-- Side Header -->

<div class="option-panel">
    <span class="panel-btn"><i class="fa ion-android-settings fa-spin"></i></span>
    <div class="color-panel">
        <h4>Text Color</h4>
        <span class="color1" onclick="setActiveStyleSheet('color1'); return false;"><i></i></span>
        <span class="color2" onclick="setActiveStyleSheet('color2'); return false;"><i></i></span>
        <span class="color3" onclick="setActiveStyleSheet('color'); return false;"><i></i></span>
        <span class="color4" onclick="setActiveStyleSheet('color4'); return false;"><i></i></span>
        <span class="color5" onclick="setActiveStyleSheet('color5'); return false;"><i></i></span>
    </div>
</div><!-- Options Panel -->

<div class="panel-content">
    <div class="filter-items">
        <div class="row grid-wrap mrg20">

            <%--            edit by fjh--%>
            <%--            员工列表--%>
            <div class="col-md-12 grid-item col-sm-12 col-lg-12">
                <div class="widget proj-order pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <h4 class="widget-title" style="margin-bottom: 10px;">预定业务列表</h4>

                    <div class="table-wrap" style="margin-bottom: 20px;">

                        <div class="layui-row">
                            <div class="layui-col-md9">
                                <div class="layui-form-item">

                                    <div class="layui-inline">
                                        <input id="input-search-guestId" type="text" placeholder="--客户ID--" class="layui-input">
                                    </div>
                                    <div class="layui-inline">
                                        <input id="input-search-roomId" type="text" placeholder="--房间ID--" class="layui-input">
                                    </div>
                                    <button id="btn-search" type="button" class="layui-btn">查询</button>
                                </div>
                            </div>
                            <div class="layui-col-md3">

                                <button id="btn-add" class="layui-btn layui-btn-normal">添加</button>
                                <button id="btn-delete" type="button" class="layui-btn layui-btn-danger">
                                    <i class="layui-icon layui-icon-delete"></i>删除预定
                                </button>
                                <button id="btn-stay" type="button" class="layui-btn layui-btn-danger">
                                    <i class="layui-icon layui-icon-stay"></i>预定转入住
                                </button>
                            </div>

                        </div>
                        <table id="tb-room-business" lay-filter="tb-room-business">
                        </table>
                    </div>
                </div>
            </div>

        </div><!-- Filter Items -->
    </div>
</div><!-- Panel Content -->








<footer>
    <p>Copyright <a href="http://www.bootstrapmb.com" title="">Example Company</a> &amp; 2017 - 2018</p>
    <span>10GB of 250GB Free.</span>
</footer>

<!-- Vendor: Javascripts -->
<%--<script src="js/jquery.min.js" type="text/javascript"></script>--%>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
<!-- Vendor: Followed by our custom Javascripts -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/select2.min.js" type="text/javascript"></script>
<script src="js/slick.min.js" type="text/javascript"></script>

<!-- Our Website Javascripts -->
<script src="js/isotope.min.js" type="text/javascript"></script>
<script src="js/isotope-int.js" type="text/javascript"></script>
<script src="js/jquery.counterup.js" type="text/javascript"></script>
<script src="js/waypoints.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/exporting.js" type="text/javascript"></script>
<script src="js/highcharts-more.js" type="text/javascript"></script>
<script src="js/moment.min.js" type="text/javascript"></script>
<script src="js/jquery.circliful.min.js" type="text/javascript"></script>
<script src="js/fullcalendar.min.js" type="text/javascript"></script>
<script src="js/jquery.downCount.js" type="text/javascript"></script>
<script src="js/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script>
<script src="js/jquery.formtowizard.js" type="text/javascript"></script>
<script src="js/form-validator.min.js" type="text/javascript"></script>
<script src="js/form-validator-lang-en.min.js" type="text/javascript"></script>
<script src="js/cropbox-min.js" type="text/javascript"></script>
<script src="js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="js/ion.rangeSlider.min.js" type="text/javascript"></script>
<script src="js/jquery.poptrox.min.js" type="text/javascript"></script>
<script src="js/styleswitcher.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>

<script src="layui/layui.js"></script>

<script type="text/html" id="mytoolbar">
    <div class="layui-btn-container">
        <%--        <button class="layui-btn layui-btn-sm" lay-event="staff-detail">详情</button>--%>
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="room-business-edit">编辑</button>
    </div>
</script>

<script type="text/javascript">

    layui.use(['jquery','table'],function(){

        var table = layui.table;
        var $ = layui.jquery;
        //渲染表格
        table.render({
            elem:"#tb-room-business",//渲染的表格的id
            url:"searchRoomBusinessList",//请求后台的接口
            cellMinWidth:80,
            loading:true,
            even:true,
            cols:[[//表头
                {type:'checkbox',title:'多选',width:100},
                {field:'id',title:'ID',width:100},
                {field:'guest_id_1',title:'客户ID',width:100},
                {field:'guest_id_2',title:'客户ID',width:100},
              //  {field:'c_id',title:'预定',width:100},
                {field:'room_id',title:'房间ID',width:100},
                {field:'start_time',title:'预定入住时间',width:300},
                {field:'expire_time',title:'预定退房时间',width:300},
                {toolbar:'#mytoolbar',title:'操作',width:150}
            ]],
            page:true//是否开启分页
        });

        //搜索事件
        $("#btn-search").on("click",function () {
            reloadList();
        });

        //添加事件
        $("#btn-add").on("click",function () {
            window.open("${pageContext.request.contextPath}/addRoomBusiness")
        });

        //删除事件
        $("#btn-delete").on("click",function () {
            var checkStatus = table.checkStatus('tb-room-business')
            var data = checkStatus.data
            if(data.length == 0){
                layer.alert('未选中数据')
                return false
            }
            return deleteChosen(data)
        });
        //预定转入住
        $("#btn-stay").on("click",function () {
            var checkStatus = table.checkStatus('tb-room-business')
            var data = checkStatus.data
            if(data.length == 0){
                layer.alert('未选中数据')
                return false
            }
            return bookToStay(data)
        });

        //表格的重载
        function reloadList(){
            table.reload("tb-room-business",{
                page:{
                    curr:1 //重新从第1页显示
                },
                where:{
                    guest_id:$("#input-search-guestId").val(),
                    room_id:$("#input-search-roomId").val()
                }
            },'data');
        }

        //监听表格的工具栏的事件
        table.on('tool(tb-room-business)',function (obj) {

            var data = obj.data;
            if(obj.event == 'room-business-edit'){
                window.open("${pageContext.request.contextPath}/roomBusinessEditPage?id="+data.id)
            }
        });

        //将选中项转为入住
        function bookToStay(chosenList) {
            var idList = chosenList.map(function (currentValue) {
                return currentValue.id
            })
            var formData = new FormData()
            formData.append("idList", idList)
            $.ajax({
                url:'bookToStay',
                type:'POST',
                dataType:"JSON",
                data:formData,
                processData:false,//提交formData必须要设置
                contentType:false,//提交formData必须要设置
                cache:false,
                success:function (resp) {
                    if (resp.code == 0){
                        layer.alert("转入成功！请尽快填写账单")
                        setTimeout(function () {
                            reloadList()
                        }, 1000)
                    }else {
                        layer.alert(resp.msg)
                    }
                },
                error:function () {
                    layer.alert('请求出错')
                }
            });
            return false
        }

        //删除选中项
        function deleteChosen(chosenList) {
            var idList = chosenList.map(function (currentValue) {
                return currentValue.id
            })
            var formData = new FormData()
            formData.append("idList", idList)
            $.ajax({
                url:'deleteRoomBusiness',
                type:'POST',
                dataType:"JSON",
                data:formData,
                processData:false,//提交formData必须要设置
                contentType:false,//提交formData必须要设置
                cache:false,
                success:function (resp) {
                    if (resp.code == 0){
                        layer.alert("删除成功！")
                        setTimeout(function () {
                            reloadList()
                        }, 1000)
                    }else {
                        layer.alert(resp.msg)
                    }
                },
                error:function () {
                    layer.alert('请求出错')
                }
            });
            return false
        }
    });
</script>


</body>
</html>
